<script lang="ts">
import { getCurrentInstance, ref, type Ref } from 'vue'
import Menu from '../components/icons/Menu.vue'

const initMap = (lat: number, lng: number) => {
  // @ts-ignore
  var center = new TMap.LatLng(lat, lng)
  // @ts-ignore
  var map = new TMap.Map(document.getElementById('map-container'), {
    center: center,
    zoom: 17.2,
  })
}

export default {
  components: {
    Menu
  },
  setup() {
    const instance = getCurrentInstance()
    var lat: Ref<number> = ref(parseFloat(instance?.proxy?.$route.query.lat as string))
    var lng: Ref<number> = ref(parseFloat(instance?.proxy?.$route.query.lng as string))

    if (isNaN(lat.value) || isNaN(lat.value)) {
      lat.value = 45.773816
      lng.value = 126.618839
    }

    return {
      lat,
      lng,
    }
  },
  methods: {
  },
  beforeCreate() {
    // initMap(this.lat, this.lng)
    document.querySelector('body')?.setAttribute('style', 'background: white')
  },
  beforeDestroy() {
    document.querySelector('body')?.removeAttribute('style')
  },
  mounted() {
    initMap(this.lat, this.lng)
  }
}
</script>

<template>
  <Menu />

  <div class="main-area">
    <h1>哈尔滨停车场点位地图</h1>
    <div id="map-container"></div>
  </div>
</template>

<style lang="scss" scoped>
.main-area {
  padding-left: 12vw;
  padding-top: 8vh;
  width: 90vw;
  height: 80vh;

  #map-container {
    width: 100%;
    height: 100%;
  }
}
</style>